<template>
  <div class="right">
    <!-- 热门帖子板块 -->
    <div class="hot-posts">
      <h4>热门帖子</h4>
      <ul class="post-list">
        <li v-for="(post, index) in posts" :key="index">
          <a href="#" @click.prevent="ToDetails(post.id)">
            {{ post.title }}
          </a>
          <span v-if="post.liked" class="likes-count">
            {{ post.liked }}个点赞
          </span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import {getHotPostAPI} from "@/api/post.js";

const router = useRouter();
const posts = ref([]);

// 获取帖子信息
const getHotPosts = async () => {
  const res = await getHotPostAPI({
    current: 1
  })

  posts.value = res.data
}

onMounted(() => getHotPosts())
const ToDetails = (id) => {
  router.push(`/detail?id=${id}`);
};
</script>

<style scoped>
.right {
  width: 300px;
  padding: 20px;
  background: white;
  border-left: 1px solid #f0f0f0;
}

/* 热门问题样式 */
.hot-posts h4 {
  font-size: 18px;
  color: #333;
  padding-bottom: 10px;
  border-bottom: 1px solid #f0f0f0;
}

.post-list {
  list-style: none;
}

.post-list li {
  padding: 10px 0;
  border-bottom: 1px solid #f0f0f0;
}

.post-list li:last-child {
  border-bottom: none;
}

.post-list a {
  color: #333;
  text-decoration: none;
  font-size: 14px;
  display: block;
  margin-bottom: 5px;
}

.post-list a:hover {
  color: #1890ff;
}

.likes-count {
  font-size: 12px;
  color: #999;
}
</style>
